<template>
	<div class="sc_legend">
		<div class="legend-tiem" v-for="(item, index) in legendList" :key="index">
			<div
				v-if="item.type === 'line'"
				:class="['icon', { round: item.type === 'round' }]"
				:style="{
					background: item.type !== 'round' && item.color,
					borderColor: item.type === 'round' && item.color,
					width: item.width
				}"
			>
				<span class="icon-circle" :style="{ borderColor: item.color }"></span>
			</div>
			<div
				v-else-if="item.type === 'solidround'"
				:class="['icon', { round: item.type === 'round' }]"
				:style="{
					background: item.color,
					borderColor: item.color,
					width: item.width,
					height: item.height || item.width,
					borderRadius: item.radius && item.radius + 'px'
				}"
			></div>
			<div
				v-else
				:class="['icon', { round: item.type === 'round' }]"
				:style="{
					background: item.type !== 'round' && item.color,
					borderColor: item.type === 'round' && item.color,
					width: item.width
				}"
			></div>

			<div class="label">{{ item.label }}</div>
		</div>
	</div>
</template>
<script setup>
import { defineProps } from "vue"

const props = defineProps({
	legendList: {
		type: Array,
		requireL: true,
		default: () => []
	}
})
console.log(props.legendList)
</script>
<style lang="scss">
.sc_legend {
	display: flex;
	.legend-tiem {
		display: flex;
		align-items: center;
		margin-left: 16px;
		.icon {
			width: 19px;
			height: 3px;
			margin-right: 10px;
			border-radius: 2px;
			position: relative;
			&.round {
				width: 8px;
				height: 8px;
				background: #ffffff;
				border: 2px solid #ff7070;
				border-radius: 4px;
			}
			.icon-circle {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 8px;
				height: 8px;
				background-color: #fff;
				border-width: 2px;
				border-style: solid;
				border-radius: 50%;
			}
		}
		.label {
			font-size: 12px;
			color: #50576a;
		}
	}
}
</style>
